<template>
	<view class="container">
		<view class="hader">
			<view class="tit">Top Up</view>
			<view class="Records" @tap="toRecharge">recharge record</view>
		</view>
		<!-- <view class="balance">
			<view class="balance_item">
				<view class="value">{{ user.gold_coin }}</view>
				<view class="name">可用金币</view>
			</view>
			<view class="balance_item">
				<view class="value">{{user.gold_coin}}</view>
				<view class="name">可用抽奖次数</view>
			</view>
		</view> -->
		<view class="title">Select the amount of gold in the game</view>
		<view class="product">
			<view :class="item.id == defaultid.id?'product_item active':'product_item'" v-for="(item,index) in productlist" :key="index" @tap="changechoice(item)">
				<view class="GoldCoins">
					<image class="gold" src="../../static/images/gold.png"></image>
					<view class="goldtext">{{ item.gold_coin }}</view>
				</view>
				<view class="money">${{ item.new_money/100 }}</view>
			</view>
		</view>
		<!-- <view class="title">Select payment method</view>
		<view class="payuse">
			<view class="payitem">
				<image class="paypol" src="../../static/images/paypal.png"></image>
				<image class="defa" src="../../static/images/xuanzhong.png"></image>
			</view>
		</view> -->
		<view class="paysubmit">
			<view class="buttom" @tap="topay">Top up immediately</view>
		</view>
	</view>
</template>

<script>
  import { getrequest, postrequest,EventStatistics } from '../../util/api'	
	export default {
		data() {
			return {
				ispay:false, //防重复点击
				defaultid:{}, //选中的产品
				user:{}, // 用户信息
				productlist:[], //产品
				channel_no:'',
				link:'',
			};
		},
		onLoad(){
			console.log('onLoad')
			this.channel_no = uni.getStorageSync('channel_no') ||''
			this.link = uni.getStorageSync('href') ||''
			// 请求产品
			this.getproduct()
			// 事件统计
			EventStatistics('金币充值','充值页面访问')
		},
		onShow(){
			// 请求用户数据
			this.getuserDetails()
		},
		onReady(){

		},
		methods: {
			// 跳转到充值记录
			toRecharge() {
				uni.navigateTo({
					url:'/pages/Recharge/Recharge'
				})
			},
			// 请求支付方式
			async getpayuse(){
				let params = {}
				// const res = await getrequest('/api/user/user_info',params)
				// console.log('用户信息',res)
				// if( res &&res.code == 200){
				// }
			},
			// 请求产品
			async getproduct(){
				let params = {
					channel_no:this.channel_no,
				}
				const res = await getrequest('/api/product/list',params)
				console.log('产品',res)
				if( res &&res.code == 200){
					this.productlist = res.data
					this.defaultid = this.productlist[0]
				}
			},
			// 改变选中的产品
			changechoice(item){
				this.defaultid = item
			},
			// 请求用户数据
			async getuserDetails(){
				let params = {}
				const res = await getrequest('/api/user/user_info',params)
				console.log('用户信息',res)
				if( res &&res.code == 200){
					this.user = res.data
				}
			},
			// 点击支付
			async topay(){
				// 防重复点击
				if(this.ispay){
					return
				}
				// 事件统计
				EventStatistics('金币充值','点击支付')
				this.ispay = true
				// 处理一下穿过去的首页链接
				const url = uni.getStorageSync('href')
				const htmlIndex = url.indexOf('.html');
				// 如果找到了 .html，则截取之前的部分，否则保持原样
				const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
				const processedUrl = newUrl + '#/pages/result/result'
				// const backcideoUrl = newUrl + '#/pages/play/play?videoId=' + this.videoId 
				// uni.setStorageSync('backcideoUrl',backcideoUrl)
				uni.showToast({
					title: 'In payment...',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000 
				})
				console.log('lujing',processedUrl)
				let params = {
					product_id:this.defaultid.id,
					pay_type:'STRIPE',
					return_url:processedUrl,
					channel_no:this.channel_no,
					link:this.link,
					// sub_channel_no: this.sub_channel_no,
				}
		        const res = await postrequest('/api/order/create',params)
				console.log('创建订单',res)
				if(res&&res.code == 200){
					this.timer = setTimeout(()=>{
						this.ispay = false
					},3000)
					
					// 跳转
					window.location.href = res.data.payUrl
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgb(255, 255, 255);
		.hader{
			width: 750rpx;
			height: 100rpx;
			display: flex;
			.tit{
				width: 200rpx;
				height: 100rpx;
				margin: 0 0 0 220rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 100rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
			.Records{
				width: 240rpx;
				height: 100rpx;
				font-size: 26rpx;
				line-height: 104rpx;
				color: rgba(128, 128, 128, 1);
				text-align: center;
				margin-left: 80rpx;
				// border: 1px solid black;
			}
		}

		.balance{
			width: 720rpx;
			height: 200rpx;
			border-radius: 8px;
			background: url('../../static/images/vipbj.png') no-repeat;
			background-size: 100% 100%;
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			margin: 0 auto;
			display: flex;
			.balance_item{
				width: 360rpx;
				height: 200rpx;
				text-align: center;
				.value{
					width: 360rpx;
					height: 70rpx;
					margin: 40rpx 0 0 0;
					font-size: 48rpx;
					font-weight: 700;
					line-height: 70rpx;
					color: rgba(255, 255, 255, 1);
				}
				.name{
					width: 360rpx;
					height: 40rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
		.title{
			width: 620rpx;
			height: 40rpx;
			margin: 30rpx 0 0 20rpx;
			font-size: 32rpx;
			font-weight: 700;
			line-height: 40rpx;
			color: rgba(0, 0, 0, 1);
		}
		.product{
			width: 720rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			// border: 1px solid black;
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
			gap: 10px; /* 网格间距 */
			.product_item {
				height:  60rpx;
				border-radius: 10rpx;
				background-color: rgba(240, 240, 240, 1);
				border: 1px solid rgba(240, 240, 240, 1);
				color: white;
				padding: 20px;
				text-align: center;
				font-size: 18px;
				.GoldCoins{
					height: 50rpx;
					display: flex;
					// border: 1px solid black;
					margin-top: -10rpx;
					.gold{
						width: 48rpx;
						height: 48rpx;
					}
					.goldtext{
						width: 36px;
						height: 24px;
						font-size: 16px;
						line-height: 23.17px;
						color: rgba(44, 44, 44, 1);
					}
				}
				.money{
					height: 30rpx;
					font-size: 14px;
					line-height: 20.27px;
					color: rgba(128, 128, 128, 1);	
					text-align: center;
				}
			}
			.active{
				background-color: rgba(255, 242, 242, 1);
				border: 1px solid rgba(250, 134, 17, 1);
			}
		}
		.payuse{
			width: 750rpx;
			margin-top: 30rpx;
			.payitem{
				width: 720rpx;
				height: 100rpx;
				border-radius: 6px;
				margin: 0 auto;
				background: rgba(242, 242, 242, 1);
				box-shadow: 0px 2px 4px  rgba(166, 166, 166, 0.25);
				.paypol{
					width:220rpx;
					height: 54rpx;
					margin: 24rpx 20rpx;
				}
				.defa{
					width: 40rpx;
					height: 40rpx;
					margin: 10rpx 0 24rpx 350rpx;
				}
			}
		}
		.paysubmit{
			width: 750rpx;
			height: 110rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0rpx;
			.buttom{
				width: 660rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;


			}

		}
	}
</style>
